<script setup>
// import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
import { editor_operation_arr } from "@/views/shotstack/MuseMixedCut/utools/index.js";
import { message } from "ant-design-vue";
import { onMounted, ref, computed, reactive } from 'vue';
import { useStore } from "vuex";
import {
  ClockCircleFilled
} from "@ant-design/icons-vue";
const store = useStore();
const props = defineProps({
  editor: {
    type: Object,
  },
  // 混剪 | 数字人
  useType: {
    type: String,
    default: "混剪"
  }
})

// 当前选区的id和文本信息
const editSubtitleData = computed(() => {
  return store.state.videoMixCut.editSubtitleData
})

const state = reactive({
  time: null, // 停顿时间
  ph: null  // 修改读音
  // Bo_visible: false
})

const getTime = computed({
  get() {
    return state.time ? state.time / 1000 : null
  },
  set(val) {
    state.time = val * 1000
  }
})

// 当前光标选择的文本信息
const selectionData = computed(() => {
  if (store?.state?.videoMixCut?.selectionsData) {
    return store.state.videoMixCut.selectionsData
  } else {
    return null
  }
})

// 测试输入修改发音的内容是否符合条件
const testPronounceText = computed(() => {
  if (state.ph == '' || state.ph == null) return true
  return /^[a-zA-Z]{1,9}[1-5]$/.test(state.ph)
})

// 修改发音
const insertPronounce = () => {
  // 符合基础条件 +  符合条件
  if (!validateFn() || !testPronounceText.value) return
  props.editor.commands.setPronounce({
    conten: selectionData.value.text,
    ph: state.ph,
    subId: editSubtitleData.value.id
  })
}




// 判断下方按钮的禁用情况
const isdisable = (name) => {
  if (name == "插入停顿") {
    return false;
  } else if (
    name == "取消诵读" ||
    name == "数字读音" ||
    name == "修改发音"
  ) {
    if (Object.keys(selectionData.value).length == 0) {
      return true
    } else {
      if (name == '修改发音') {
        // 只有单个且为汉字
        let flage = false
        selectionData.value?.text.trim().length != 1 && (flage = true)
        if (!/[\u4e00-\u9fa5]/.test(selectionData.value?.text)) flage = true
        return flage
      } else {
        if (selectionData.value?.text.trim().length >= 1) {
          return false
        } else {
          return true
        }
      }

    }
  }
};
const emit = defineEmits(["openUpLoad",]);

// 判断是否为纯文本
const isSelectionPureText = () => {
  const selectionContent = props.editor.state.selection.content();
  let allText = selectionContent?.content?.content?.[0]?.content?.content.every((item) => {
    return item.type.name == 'text'
  })
  return allText
}

// 点击按钮使用功能前的基础校验
const validateFn = () => {
  // debugger
  if (props.useType == '混剪') {
    if (selectionData.value.selectedNodes.length < 1) {
      message.error('请选择要取消诵读的文本')
      return false
    } else if (selectionData.value.selectedNodes.length > 1) {
      message.error('只能对连续的文本进行操作，不能包含其他标记节点')
      return false
    } else if (!isSelectionPureText()) {
      message.error('只能对连续的文本进行操作，不能包含其他标记节点')
      return false
    }
  } else if (props.useType == '数字人') {
    const text = selectionData.value?.text
    if (!text || text?.length < 1) {
      message.error('请选择要取消诵读的文本')
      return false
    }
  }
  return true
}

// 按钮点击事件
const click_btn = (name) => {
  console.log(props.editor, 'props.editor');
  if (name === '取消诵读') {
    if (!validateFn()) return
    props.editor.commands.handleCancelRead({
      text: selectionData.value.text,
      subId: editSubtitleData.value.id,
      editor: props.editor
    })
  }
}

// 插入停顿 点击确定
const insertStop = () => {
  if (!getTime.value) {
    return message.warning('请输入停顿时间')
  } else if (!/^[0-9]+(.[0-9]{1,2})?$/.test(+getTime.value)) {
    return message.warning('请输入正确的停顿时间')
  } else if (+getTime.value < 0.1) {
    return message.warning('停顿时间不能小于0.1秒')
  } else if (+getTime.value > 10) {
    return message.warning('停顿时间不能大于10秒')
  }
  props.editor.commands.insertPause({
    type: 'break',
    attrs: {
      time: parseFloat(getTime.value) + 's',
      subId: editSubtitleData.value.id
    }
  })
}

const Bo_visible = ref('false')

const pauseItem = (item, id, index1) => {
  // 插入停顿
  if (id == 1) {
    props.editor.commands.insertPause({
      type: 'break',
      attrs: {
        time: parseFloat(item.value) + 's',
        subId: editSubtitleData.value.id

      }
    })

    // Bo_visible.value = false
  } else if (id == 3) {
    if (!validateFn()) return
    // 数字读音
    if (!/^\d+$/.test(selectionData.value.text)) return message.error('只能对纯数字进行操作')
    props.editor.commands.setNumberPronunciation({
      text: selectionData.value.text,
      type: item.value,
      subId: editSubtitleData.value.id
    })
  }
}

</script>

<template>
  <div class="editor_operation">
    <template v-for="(item, index1) in editor_operation_arr" :key="item.id">
      <template v-if="isdisable(item.name) == false">
        <!-- 内层 点击小卡片 -->
        <!-- :visible="clicked"  v-model:visible="Bo_visible" -->
        <a-popover placement="bottom" trigger="click" @visibleChange="handleClickChange">
          <template #content>
            <div v-if="item.id == 1 || item.id == 3"
              :style="item.id === 1 ? { 'width': '198px' } : { 'width': '256px' }"
              style=" border-radius: 5px;">
              <div class="box_1_top" :style="item.id === 1 ? { 'border-bottom': '1px solid #e8e8e8' } : {}">
                <div v-for="v1 in item.TimeData" :key="v1.value" @click="pauseItem(v1, item.id, index1)">
                  <div class="box_1_top_item" style="height: 36px; line-height: 36px;  cursor: pointer;">
                    {{ v1.label }}
                  </div>
                </div>
              </div>
              <!-- 插入停顿 -->
              <div v-if="item.id == 1" class="box_1_bottom" style="
                  display: flex;  
                  justify-content: space-around; 
                  align-items: center; 
                  height: 36px; 
                  margin-top: 5px;">
                <div class="box_1_left">
                  自定义
                </div>
                <div class="box_1_content">
                  <a-input-number v-model:value="getTime" :max="10" :precision="1" :min="0.1" :step="0.1"
                    :controls="false" :bordered="false" type="number"
                    style="width: 80px; height: 32px; background-color: #f4f4f4;" />
                </div>
                <div class="box_1_right">
                  <a-button @click="insertStop">确认</a-button>
                </div>
              </div>
            </div>
            <!-- 修改发音 -->
            <div v-if="item.id == 4" class="box_item" style="width:229px;
                border-radius: 5px;
              ">
              <div class="box_content_main" style="display: flex;  
                justify-content: space-around; 
                align-items: center; 
                height: 36px;">
                <div class="box_1_left">
                  修改为
                </div>
                <div class="box_1_content"
                  style="display: flex; flex-direction: column; justify-content: start; position: relative; ">
                  <a-input v-model:value="state.ph" style="width: 80px; height: 30px;" />
                  <span v-show="!testPronounceText"
                    style="font-size: 12px; color: red; position: absolute; bottom: -22px; left: 0;"
                    class="tips_msg">格式不正确</span>
                </div>
                <div class="box_1_right">
                  <a-button @click="insertPronounce">确认</a-button>
                </div>
              </div>
              <div style="font-size: 12px; margin-top: 18px; color: #77797B;">1-4声拼音后面加1~4,轻声加5</div>
              <div style="font-size: 12px; margin-top: 18px; color: #77797B;">示例: <span>汉 - han4</span> 、 <span>字 -
                  zi4</span></div>
              <div>
              </div>
            </div>
          </template>

          <template v-if="item.id == 1">
        <a-tooltip placement="top">
        <template #title>
          <span>推荐音色和声音克隆音色不支持插入停顿(生成的音频结果将跳过停顿)</span>
        </template>
        <!-- 底部按钮 -->
        <div class="editor_operation_item" @click="click_btn(item.name)">
          <!-- <ClockCircleFilled v-if="item.name == '插入停顿'" style="color: #128b7e;" /> -->
          <cu-icon :type="item.icon"></cu-icon>
          {{ item.name }}
        </div>
      </a-tooltip>
          </template>
          <template v-else>
                      <!-- 底部按钮 -->
          <div class="editor_operation_item" @click="click_btn(item.name)">
            <!-- <ClockCircleFilled v-if="item.name == '插入停顿'" style="color: #128b7e;" /> -->
            <cu-icon :type="item.icon"></cu-icon>
            {{ item.name }}
          </div>
          </template>
        </a-popover>
      </template>

      <!-- 禁用状态 -->
      <template v-else>
        <!-- 底部按钮 -->
        <!-- 悬停  点击 气泡   外层 horver   -->
        <a-tooltip placement="top" trigger="click" :visible="hovered" @visibleChange="handleHoverChange">
          <!-- 悬停 轻提示 -->
          <template #title v-if="item.tooltipText !== ''">
            <span style="font-size: 12px;">{{ item.tooltipText }}</span>
          </template>
          <div class="editor_operation_item disable_editor_operation_item">
            <cu-icon :type="item.icon"></cu-icon>
            {{ item.name }}
          </div>
        </a-tooltip>
      </template>
    </template>
  </div>
</template>

<style scoped lang="less">
// 每一项 底部的操作按钮容器
.editor_operation {
  display: flex;
  //   position: absolute;
  //   bottom: 5px;
  //   left: 5px;
  // overflow: hidden;
  display: flex;

  // 每一项 正常的状态
  .editor_operation_item {
    min-width: 78px;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
    padding: 2px 8px;
    background-color: #f4f5f5;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    font-size: 12px;
    color: #1c1f23b3;
    // 静止选取文字
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;

    /* 非前缀版本，适用于Chrome和Opera */
    &:hover {
      background-color: #eceded;
    }
  }



  // .box_item{
  //   width:249px;
  //   border-radius: 5px;
  //   padding: 20px;
  //   .box_content_main{
  //     display: flex;  
  //     justify-content: space-around; 
  //     align-items: center; 
  //     height: 36px;
  //       .box_1_content{
  //         display: flex;
  //     }
  //   }
  // }


  // 禁用的状态
  .disable_editor_operation_item {
    cursor: not-allowed;
    background-color: #f9fafa;
    color: #aeafb0;

    &:hover {
      background-color: #f9fafa;
      color: #aeafb0;
    }
  }
}

:deep(.ss-popover-inner-content) {
  padding: 0px !important;
}


:deep(.ss-input) {
  background-color: #f4f4f4 !important;
}


:deep(.ss-popover-inner) {
  border-radius: 5px !important;
}

.box_1_top_item:hover,
.hover-class {
  background-color: #f4f4f4;
}
</style>